{% extends "base.html" %}{% load i18n crm_tags %}
{% block title %}{% translate "Call history" %}{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <h1>{% translate "Call history" %}</h1>
    <p>{% translate "Search every logged call by the caller’s phone number or names. Part of a number works too, such as the last digits." %}</p>
  </div>
  {% if user.is_supervisor and searched %}<div class="actions"><a class="btn" href="{% url_with export='csv' %}">{% translate "Download these calls (CSV)" %}</a></div>{% endif %}
</div>

<form method="get" class="history-search" role="search">
  <div class="history-main">
    <label class="sr-only" for="hq">{% translate "Phone number or names" %}</label>
    <input id="hq" type="search" name="q" value="{{ q }}" placeholder="{% translate '0712 345 678, 345678 or Neema Mushi' %}" autocomplete="off" {% if not q %}autofocus{% endif %}>
    <button class="btn btn-primary" type="submit">{% translate "Search calls" %}</button>
  </div>
  <details class="history-more"{% if purpose or outcome or agent_id or date_from or date_to %} open{% endif %}>
    <summary>{% translate "More filters" %}</summary>
    <div class="history-filters">
      <div class="field"><label for="hf">{% translate "From" %}</label><input id="hf" type="date" name="from" value="{{ date_from|date:'Y-m-d' }}"></div>
      <div class="field"><label for="ht">{% translate "To" %}</label><input id="ht" type="date" name="to" value="{{ date_to|date:'Y-m-d' }}"></div>
      <div class="field"><label for="hp">{% translate "Purpose" %}</label>
        <select id="hp" name="purpose"><option value="">{% translate "Any purpose" %}</option>{% for v, l in purposes %}<option value="{{ v }}"{% if v == purpose %} selected{% endif %}>{{ l }}</option>{% endfor %}</select></div>
      <div class="field"><label for="ho">{% translate "Outcome" %}</label>
        <select id="ho" name="outcome"><option value="">{% translate "Any outcome" %}</option>{% for v, l in outcomes %}<option value="{{ v }}"{% if v == outcome %} selected{% endif %}>{{ l }}</option>{% endfor %}</select></div>
      <div class="field"><label for="ha">{% translate "Agent" %}</label>
        <select id="ha" name="agent"><option value="">{% translate "Any agent" %}</option>{% for a in agents %}<option value="{{ a.pk }}"{% if a.pk|stringformat:"s" == agent_id %} selected{% endif %}>{{ a.display_name }}</option>{% endfor %}</select></div>
    </div>
    <div class="actions" style="margin-top:12px">
      <button class="btn" type="submit">{% translate "Show calls" %}</button>
      <a class="btn btn-quiet" href="{% url 'call_history' %}">{% translate "Clear" %}</a>
    </div>
  </details>
</form>

{% if q %}
  {% if matched %}
  <div class="matched">
    <span class="muted small">{% blocktranslate trimmed count n=matched|length %}{{ n }} caller matches:{% plural %}{{ n }} callers match:{% endblocktranslate %}</span>
    {% for c in matched|slice:":8" %}<a class="pill" href="{{ c.get_absolute_url }}">{{ c.name }} <span class="phone">{{ c.phone_display }}</span></a>{% endfor %}
    {% if matched|length > 8 %}<span class="muted small">{% blocktranslate trimmed count n=matched|length|add:"-8" %}and {{ n }} more{% plural %}and {{ n }} more{% endblocktranslate %}</span>{% endif %}
  </div>
  {% else %}
  <div class="panel empty"><strong>{% translate "No caller has this number or name." %}</strong>
    {% if q|length > 5 %}<a href="{% url 'find' %}?q={{ q|urlencode }}">{% translate "Add them as a new caller" %}</a>{% else %}{% translate "Try more digits or another spelling." %}{% endif %}</div>
  {% endif %}
{% endif %}

{% if summary and page.paginator.count %}
<p class="muted small">{% blocktranslate trimmed count n=summary.n with r=summary.received m=summary.made min=summary.minutes|default:0 %}{{ n }} call found: {{ r }} received, {{ m }} made, {{ min }} minutes.{% plural %}{{ n }} calls found: {{ r }} received, {{ m }} made, {{ min }} minutes.{% endblocktranslate %}</p>
{% elif not searched %}
<p class="muted small">{% translate "Latest calls from everyone. Search above to narrow them down." %}</p>
{% endif %}

{% if page.object_list %}
<ol class="history-list">
  {% for c in page %}
  <li style="--dot: var(--c-{{ c.purpose }})">
    <div class="history-when">
      <span class="num">{{ c.called_at|date:"j M Y" }}</span>
      <span class="num muted small">{{ c.called_at|date:"H:i" }}</span>
    </div>
    <div class="history-body">
      <div class="history-top">
        <a class="title" href="{{ c.contact.get_absolute_url }}">{{ c.contact.name }}</a>
        <span class="phone small muted">{{ c.contact.phone_display }}</span>
        <span class="tag p-{{ c.purpose }}">{{ c.get_purpose_display }}</span>
        {% if c.ticket %}<a class="ticket-ref" href="{{ c.ticket.get_absolute_url }}">{{ c.ticket.number }}</a>{% endif %}
      </div>
      <div class="muted small">{{ c.get_direction_display }}, {{ c.get_outcome_display|lower }}{% if c.duration_minutes %}, {% blocktranslate trimmed with m=c.duration_minutes %}{{ m }} min{% endblocktranslate %}{% endif %}{% if c.agent %}, {% blocktranslate trimmed with name=c.agent.display_name %}taken by {{ name }}{% endblocktranslate %}{% endif %}</div>
      {% if c.summary %}<p class="summary">{{ c.summary|truncatechars:300 }}</p>{% endif %}
    </div>
  </li>
  {% endfor %}
</ol>
{% include "_pager.html" %}
{% elif searched and matched != None and matched %}
<div class="panel empty"><strong>{% translate "No calls match these filters." %}</strong>{% translate "Try a wider date range or fewer filters." %}</div>
{% elif searched and not q %}
<div class="panel empty"><strong>{% translate "No calls match these filters." %}</strong>{% translate "Try a wider date range or fewer filters." %}</div>
{% endif %}
{% endblock %}